<template>
      <div>
          <div class="air-header">{{airItems.name}}</div>
          <div class="isid" style="display:none">{{airItems.deviceid}}</div>
          <div  class="air-content">
                <ul>
                    <li>
                       <div class="air-name">状态</div>
                       <div class="air-main">
                          <el-select v-model="airItems.status" size="mini" placeholder="请选择" >
                              <el-option
                                v-for="item in airStatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                            <el-button size="mini" type='primary' @click="set_air_status(airItems.deviceid,airItems.name,airIndex,airItems.status)">设置</el-button>
                       </div>
                    </li>
                    <li>
                      <div class="air-name">制冷</div>
                      <div class="air-main">
                          <el-select v-model="airItems.colddata" size="mini" placeholder="请选择">
                            <el-option
                              v-for="item in coldList"
                              :label="item"
                              :value="item">
                            </el-option>
                          </el-select>
                          <el-button size="mini" type='primary' @click="set_colddata(airItems.deviceid,airItems.colddata,airItems.name,airIndex)">设置</el-button>
                      </div>
                    </li>
                     <!--<li>
                      <div class="air-name">除湿</div>
                      <div class="air-main">
                            <el-select v-model="airItems.dehumidifydata" size="mini" placeholder="请选择" >
                              <el-option
                                v-for="item in dehumidifyList"
                                :label="item"
                                :value="item">
                              </el-option>
                            </el-select>
                            <el-button size="mini" type='primary' @click="set_dehumidifydata(airItems.deviceid,airItems.dehumidifydata,airItems.name,airIndex)">设置</el-button>
                        </div>
                    </li>-->
                </ul>
          </div>
        </div>
</template>
<script>
import {get_coldID,get_dehumidifyID} from '../../../js/public.js';
export default {
  name:'aris',
  props:["airItems","showContent","airIndex"],
  data () {
    return {
      coldList:[18,19,20,21,22,23,24,25],
      dehumidifyList:[18,19,20,21,22,23,24,25],
      airStatusList:[
      {
          lable:1,
          value:"开"
      },
      {
          lable:2,
          value:"关"
      }
      ]
    }
  },
  methods: {
    set_air_status(deviceid,name,index,status){
      let that = this;

      if(status == "开"){
          status = 655362;
      }else if(status == "关"){
          status = 655363;
      }
      let msg = {"cmd":"CGI_MONITOR_SET_CTRL","did":deviceid,"cid":status};

        this.$confirm('此操作是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  data:JSON.stringify(msg),
                  success:function(msg){
                  }
              })
          }).catch(() => {
              //that.$data.electricList[index].isActive = !status;
          });
    },
    set_colddata(deviceid,colddata,name,index){
        let that = this;
        let msg = {"cmd":"CGI_MONITOR_SET_CTRL","did":deviceid,"cid":get_coldID(colddata)};
  
        console.log(msg);
        this.$confirm('此操作是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  data:JSON.stringify(msg),
                  success:function(msg){
                  }
              })
          }).catch(() => {
              //that.$data.electricList[index].isActive = !status;
          });
    },
     set_dehumidifydata(deviceid,dehumidifydata,name,index){
      let that = this;
        let msg = {"cmd":"CGI_MONITOR_SET_CTRL","did":deviceid,"cid":get_dehumidifyID(dehumidifydata)};
        this.$confirm('此操作是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  data:JSON.stringify(msg),
                  success:function(msg){
                  }
              })
          }).catch(() => {
              //that.$data.electricList[index].isActive = !status;
          });
    },
  }
}
</script>
<style scope>
  .air{
    width: 180px;
    position: absolute;
    height: auto;
    left: 0px;
    top: 0px;
    background: #fff;
    text-align: center;
    cursor: move;
    overflow: hidden;
  }
  .air .air-header{
    width: 100%;
    height: 25px;
    line-height: 25px;
    background: #0080C0;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
  }
  .air .air-content ul{
    width: 100%;
    height: 100%;
    padding-bottom: 8px;
  }
  .air .air-content ul li{
    height: 30px;
    line-height: 30px;
   padding: 2px 0px;
  }
  .air-name{
    width: 50px;
    height: 100%;
    float: left;
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 3px;
  }
  .air-main{
    float: left;
    width: 130px;
    height: 30px;
    line-height: 30px;
    margin-top: 3px;
  }
  .air-main .el-select{
    width:60px;
    float: left;
  }
   .air-main .el-button{
    float: left;
    margin-left: 5px;
   }
</style>
